<script setup lang="ts">
import { computed } from 'vue'
import { ElCard, ElTag, ElButton, ElSpace, ElIcon, ElTooltip } from 'element-plus'
import { Cellphone, Monitor, Connection, VideoPlay, Tools, CameraFilled, TrendCharts } from '@element-plus/icons-vue'
import type { Device } from '@/types'

interface Props {
  device: Device
}

const props = defineProps<Props>()

const emit = defineEmits<{
  connect: [device: Device]
  disconnect: [device: Device]
  control: [device: Device]
  settings: [device: Device]
  screenshot: [device: Device]
  performance: [device: Device]
}>()

const deviceIcon = computed(() => {
  switch (props.device.platform || props.device.type) {
    case 'android':
    case 'Android':
      return Cellphone
    case 'ios':
    case 'iOS':
      return Cellphone
    case 'simulator':
      return Monitor
    case 'cloud':
      return VideoPlay
    default:
      return Monitor
  }
})

const statusColor = computed(() => {
  switch (props.device.status) {
    case 'online':
      return 'success'
    case 'offline':
      return 'danger'
    case 'busy':
      return 'warning'
    case 'connecting':
      return 'info'
    default:
      return 'info'
  }
})

const statusText = computed(() => {
  const statusMap = {
    online: '在线',
    offline: '离线',
    busy: '忙碌',
    connecting: '连接中'
  }
  return statusMap[props.device.status] || '未知'
})

const handleConnect = () => {
  emit(props.device.status === 'online' ? 'disconnect' : 'connect', props.device)
}
</script>

<template>
  <ElCard class="device-card" shadow="hover">
    <template #header>
      <div class="card-header">
        <div class="device-info">
          <ElIcon class="device-icon" :size="20">
            <component :is="deviceIcon" />
          </ElIcon>
          <div class="device-details">
            <span class="device-name">{{ device.name }}</span>
            <span class="device-id">{{ device.deviceId }}</span>
          </div>
        </div>
        <ElTag :type="statusColor" size="small">
          {{ statusText }}
        </ElTag>
      </div>
    </template>

    <div class="device-body">
      <div class="device-specs">
        <p><strong>型号:</strong> {{ device.model || '未知' }}</p>
        <p><strong>分辨率:</strong> {{ device.resolution || '未知' }}</p>
        <p><strong>系统:</strong> {{ device.version || '未知' }}</p>
        <p v-if="device.lastActive"><strong>最后活跃:</strong> {{ new Date(device.lastActive).toLocaleString() }}</p>
      </div>

      <div class="device-actions">
        <ElSpace>
          <ElButton
            :type="device.status === 'online' ? 'danger' : 'primary'"
            size="small"
            :icon="Connection"
            :loading="device.status === 'connecting'"
            @click="handleConnect"
          >
            {{ device.status === 'online' ? '断开' : '连接' }}
          </ElButton>
          
          <ElTooltip content="截图" placement="top">
            <ElButton
              type="success"
              size="small"
              :icon="CameraFilled"
              :disabled="device.status !== 'online' || device.platform !== 'android'"
              @click="emit('screenshot', device)"
            >
            </ElButton>
          </ElTooltip>
          
          <ElTooltip content="性能监控" placement="top">
            <ElButton
              type="warning"
              size="small"
              :icon="TrendCharts"
              :disabled="device.status !== 'online' || device.platform !== 'android'"
              @click="emit('performance', device)"
            >
            </ElButton>
          </ElTooltip>
          
          <ElTooltip content="设备控制" placement="top">
            <ElButton
              type="success"
              size="small"
              :icon="VideoPlay"
              :disabled="device.status !== 'online'"
              @click="emit('control', device)"
            >
            </ElButton>
          </ElTooltip>
          
          <ElButton
            type="info"
            size="small"
            :icon="Tools"
            @click="emit('settings', device)"
          >
            设置
          </ElButton>
        </ElSpace>
      </div>
    </div>
  </ElCard>
</template>

<style scoped lang="scss">
.device-card {
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    .device-info {
      display: flex;
      align-items: center;
      gap: 12px;
      
      .device-icon {
        color: var(--el-color-primary);
      }
      
      .device-details {
        display: flex;
        flex-direction: column;
        
        .device-name {
          font-weight: 600;
          font-size: 14px;
          color: var(--el-text-color-primary);
        }
        
        .device-id {
          font-size: 12px;
          color: var(--el-text-color-secondary);
        }
      }
    }
  }
  
  .device-body {
    .device-specs {
      margin-bottom: 16px;
      
      p {
        margin: 4px 0;
        font-size: 13px;
        color: var(--el-text-color-regular);
        
        strong {
          color: var(--el-text-color-primary);
        }
      }
    }
    
    .device-actions {
      display: flex;
      justify-content: center;
    }
  }
}

@media (max-width: 768px) {
  .device-card {
    .device-body {
      .device-actions {
        justify-content: stretch;
        
        .el-space {
          width: 100%;
          justify-content: space-between;
        }
      }
    }
  }
}
</style>